import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    ListView,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Platform
} from 'react-native'
import { MtContainer, MtChar,  MtNavBar, MtScreen } from 'martian-ui';
import CircleView from '../../components/CircleView';
import { Switch } from 'react-native-switch';
import NavigationBar from '../../components/common/NavigationBar'

const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
const WINDOW_WIDTH = MtScreen.width;
const WINDOW_HEIGHT = MtScreen.height;

class TopLight extends Component {
    constructor(props) {
        super(props)
        // 初始状态
        this.state = {
            lightValue: 0,
        }

    }
    render() {
        const {navigator} =this.props;
        const Button = (
            <View style={styles.buttonContainer}>
                <Switch value={true} onValueChange={(value)=>{}}/>
            </View>
        );
        return(
            <MtContainer>
                <NavigationBar
                  title={'顶灯'}
                  statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
                  navigator={navigator}
                  style={{backgroundColor: '#F4F4F4'}}
                />
                <MtLabel style={styles.subtitle}>灯光亮度</MtLabel>
                    {Platform.OS === 'android' ? (
                        <View style={{ height: 300, justifyContent: 'center', alignItems: 'center', }}>
                            <CircleView
                                svg={{marginTop:30 }}
                                width={350}
                                height={300}
                                r={WINDOW_WIDTH /3}
                                angle={180}  //角度
                                outArcColor='#DCDBDC'//进度条全部颜色
                                strokeWidth={20}  //粗细
                                progressvalue='#00919A'//进度条 已经加载部分颜色
                                tabR={15}//
                                tabStrokeColor='#e3e3e3'
                                tabStrokeWidth='8'
                                tabColor='#fff'
                                min={0}
                                max={100}
                                step={10}
                                value={this.state.lightValue}
                                complete={temp => {
                                    this.setState({lightValue: temp});

                                }}
                                valueChange={temp => {}}
                                renderCenterView={temp => (
                                    <View style={{  height: 100}}>
                                        <View style={{ marginTop: 80, marginRight: 85, alignItems: 'center', justifyContent:'center' }}>
                                            <MtLabel style={{  fontSize: 40}}>
                                                {`${temp}%`}
                                            </MtLabel>
                                        </View>

                                        <View style={{ flexDirection: 'row', marginTop:30}}>
                                            <MtLabel style={styles.plusDelBtn1}>+</MtLabel>
                                            <MtLabel style={styles.plusDelBtn2}>-</MtLabel>
                                        </View>

                                    </View>
                                )}
                                enTouch={true} />

                        </View>) :(
                        <View style={{ height: 260, justifyContent: 'center', alignItems: 'center', }}>
                            <CircleView
                                svg={{marginTop:10 }}
                                width={350}
                                height={300}
                                r={WINDOW_WIDTH /3}
                                angle={180}  //角度
                                outArcColor='#DCDBDC'//进度条全部颜色
                                strokeWidth={20}  //粗细
                                progressvalue='#00919A'//进度条 已经加载部分颜色
                                tabR={15}//
                                tabStrokeColor='#e3e3e3'
                                tabStrokeWidth='8'
                                tabColor='#fff'
                                min={0}
                                max={100}
                                step={10}
                                value={this.state.lightValue}
                                complete={temp => {
                                    this.setState({lightValue: temp});

                                }}
                                valueChange={temp => {}}
                                renderCenterView={temp => (
                                    <View style={{  height: 100}}>
                                        <View style={{ marginTop: 80, marginRight: 65, alignItems: 'center', justifyContent:'center' }}>
                                            <MtLabel style={{  fontSize: 40}}>
                                                {`${temp}%`}
                                            </MtLabel>
                                        </View>

                                        <View style={{ flexDirection: 'row', marginTop: 50}}>
                                            <MtLabel style={styles.plusDelBtn1}>+</MtLabel>
                                            <MtLabel style={styles.plusDelBtn2}>-</MtLabel>
                                        </View>

                                    </View>
                                )}
                                enTouch={true} />

                        </View>
                    )}
                <ScrollView style={{ flex: 1}}>
                    <View style={{justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{
                        width:WINDOW_WIDTH-50,
                        alignItems:'center',
                        flexDirection: 'row',
                        paddingVertical: 40,
                        paddingLeft: 15,
                        backgroundColor:'#fff'
                    }}>
                        <MtLabel style={{
                            fontWeight: 'bold',
                            flex: 1
                        }}>开关</MtLabel>
                        {Button}
                    </View>
                    <View style ={{
                        paddingVertical: 40,
                        paddingLeft: 15,
                        marginVertical: 8,
                        width:WINDOW_WIDTH-50,
                        alignItems:'center',
                        backgroundColor:'#fff'
                    }}>
                        <View style={{
                            flexDirection: 'row',

                        }}>
                            <MtLabel style={{
                                fontWeight: 'bold',
                                flex: 1
                            }}>指令反向</MtLabel>
                            {Button}
                        </View>
                        <MtL3 style={{ marginTop: 30, marginRight: 15 }}>开启此选项后，场景模式指令将会按反向状态</MtL3>
                    </View>
                      </View>
                </ScrollView>

            </MtContainer>


        )

    }

}

export default TopLight

const styles = StyleSheet.create({
    subtitle:{
        fontWeight: 'bold',
        alignItems:'center', // 必须设置,否则换行不起作用
        paddingVertical: 40,
        paddingLeft: 20,
    },
    plusDelBtn1:{

        fontWeight: 'bold',

        alignItems: 'center',
        fontSize: 24,
        marginRight: 25,

    },
    plusDelBtn2:{
        marginLeft: WINDOW_WIDTH/2 + 10,
        fontWeight: 'bold',
        alignItems: 'center',

        fontSize: 24

    },
    buttonContainer: {
        flex: 1,
        marginRight: 10,
        alignItems: 'flex-end',
    },
})
